<template>
  <div>
    <div style="height:580px;" ref="map1"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const map1 = ref(null);
// 加载地图函数 
const loadMap = () => {
  AMapLoader.load({
    key: "1166c18cee90b86619f3399e054ba9b2", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      // 创建地图实例 
      const map = new AMap.Map(map1.value, {
        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D', //地图模式
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 17, //初始化地图层级
        rotation: -15, //初始地图顺时针旋转的角度
        zooms: [2, 20], //地图显示的缩放级别范围
        center: [103.857889,36.063701], //地图中心点
        // 设置地图样式 
        mapStyle: "amap://styles/darkblue",
      });
      // 给地图设置标记点 
      const position = new AMap.LngLat(103.857889,36.063701);
      const marker = new AMap.Marker({
        position:position,
        icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        title: "兰州站",
      });
      // 给地图添加标记点 
      map.add(marker);
      AMap.plugin("AMap.DistrictSearch", function () {
        let polygons = [];
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district", //查询行政级别为 市
        };
        let district = new AMap.DistrictSearch(opts);
        district.setExtensions("all");
        district.search("兰州市", function (status, result) {
          map.remove(polygons); //清除上次结果
          polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                strokeWeight: 5,
                path: bounds[i],
                fillOpacity: 0.4,
                fillColor: "#80d8ff",
                strokeColor: "#0091ea",
              });
              polygons.push(polygon);
            }
          }
          map.add(polygons);
          map.setFitView(polygons); //视口自适应
        });
      });
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
}
onMounted(()=>{
  loadMap()
})
</script>

<style scoped lang="less"></style>